<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG转PNG工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: #f8f9fa;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        h1 {
            color: #6366f1;
            text-align: center;
            margin-bottom: 30px;
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .icon-item {
            text-align: center;
            padding: 15px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .icon-item:hover {
            border-color: #6366f1;
            transform: translateY(-2px);
        }
        .icon-preview {
            width: 48px;
            height: 48px;
            margin: 0 auto 10px;
        }
        .icon-name {
            font-weight: 600;
            color: #374151;
            margin-bottom: 10px;
        }
        .download-btn {
            background: #6366f1;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
        }
        .download-btn:hover {
            background: #4f46e5;
        }
        .instruction {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            color: #1e40af;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 导航栏图标转换工具</h1>
        <div class="instruction">
            <strong>使用说明：</strong>点击下载按钮即可将SVG图标转换为48x48的PNG格式，适用于微信小程序tabBar。
        </div>
        <div class="icon-grid" id="iconGrid">
            <!-- 图标将通过JavaScript动态生成 -->
        </div>
    </div>

    <script>
        const icons = [
            {
                name: 'home-new',
                displayName: '首页',
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                    <defs>
                        <linearGradient id="homeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <path fill="url(#homeGradient)" d="M12 2.1L1 9v2h2v9a1 1 0 001 1h16a1 1 0 001-1v-9h2V9L12 2.1zM5 19v-8.799L12 5.5l7 4.701V19h-4v-6H9v6H5z" stroke="url(#homeGradient)" stroke-width="0.5" opacity="0.9"/>
                    <circle cx="12" cy="14" r="1.5" fill="url(#homeGradient)" opacity="0.8"/>
                </svg>`
            },
            {
                name: 'home-active-new',
                displayName: '首页激活',
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                    <defs>
                        <linearGradient id="homeActiveGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#4f46e5;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <path fill="url(#homeActiveGradient)" d="M12 2.1L1 9v2h2v9a1 1 0 001 1h16a1 1 0 001-1v-9h2V9L12 2.1zM5 19v-8.799L12 5.5l7 4.701V19h-4v-6H9v6H5z"/>
                    <circle cx="12" cy="14" r="2" fill="#ffffff" opacity="0.9"/>
                    <circle cx="12" cy="14" r="1" fill="url(#homeActiveGradient)"/>
                </svg>`
            },
            {
                name: 'order-new',
                displayName: '订单',
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                    <defs>
                        <linearGradient id="orderGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#f97316;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#ef4444;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <rect x="4" y="3" width="16" height="18" rx="2" ry="2" fill="none" stroke="url(#orderGradient)" stroke-width="1.5" opacity="0.9"/>
                    <path fill="url(#orderGradient)" d="M8 7h8v1H8zm0 3h8v1H8zm0 3h5v1H8z" opacity="0.8"/>
                    <circle cx="7" cy="7.5" r="1" fill="url(#orderGradient)" opacity="0.6"/>
                    <circle cx="7" cy="10.5" r="1" fill="url(#orderGradient)" opacity="0.6"/>
                    <circle cx="7" cy="13.5" r="1" fill="url(#orderGradient)" opacity="0.6"/>
                </svg>`
            },
            {
                name: 'order-active-new',
                displayName: '订单激活',
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                    <defs>
                        <linearGradient id="orderActiveGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#ea580c;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#dc2626;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <rect x="4" y="3" width="16" height="18" rx="2" ry="2" fill="url(#orderActiveGradient)"/>
                    <path fill="#ffffff" d="M8 7h8v1H8zm0 3h8v1H8zm0 3h5v1H8z" opacity="0.9"/>
                    <circle cx="7" cy="7.5" r="1" fill="#ffffff" opacity="0.8"/>
                    <circle cx="7" cy="10.5" r="1" fill="#ffffff" opacity="0.8"/>
                    <circle cx="7" cy="13.5" r="1" fill="#ffffff" opacity="0.8"/>
                </svg>`
            },
            {
                name: 'favorite-new',
                displayName: '收藏',
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                    <defs>
                        <linearGradient id="favoriteGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#ec4899;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#ef4444;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <path fill="none" stroke="url(#favoriteGradient)" stroke-width="1.5" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" opacity="0.8"/>
                    <circle cx="8" cy="8" r="1.5" fill="url(#favoriteGradient)" opacity="0.6"/>
                    <circle cx="16" cy="8" r="1.5" fill="url(#favoriteGradient)" opacity="0.6"/>
                </svg>`
            },
            {
                name: 'favorite-active-new',
                displayName: '收藏激活',
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                    <defs>
                        <linearGradient id="favoriteActiveGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#db2777;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#dc2626;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <path fill="url(#favoriteActiveGradient)" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                    <circle cx="8" cy="8" r="2" fill="#ffffff" opacity="0.9"/>
                    <circle cx="16" cy="8" r="2" fill="#ffffff" opacity="0.9"/>
                    <circle cx="8" cy="8" r="1" fill="url(#favoriteActiveGradient)"/>
                    <circle cx="16" cy="8" r="1" fill="url(#favoriteActiveGradient)"/>
                </svg>`
            },
            {
                name: 'profile-new',
                displayName: '我的',
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                    <defs>
                        <linearGradient id="profileGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <circle cx="12" cy="8" r="4" fill="none" stroke="url(#profileGradient)" stroke-width="1.5" opacity="0.8"/>
                    <path fill="none" stroke="url(#profileGradient)" stroke-width="1.5" d="M6 21v-2a4 4 0 014-4h4a4 4 0 014 4v2" opacity="0.8"/>
                    <circle cx="12" cy="8" r="2" fill="url(#profileGradient)" opacity="0.6"/>
                    <circle cx="12" cy="17" r="1" fill="url(#profileGradient)" opacity="0.5"/>
                </svg>`
            },
            {
                name: 'profile-active-new',
                displayName: '我的激活',
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
                    <defs>
                        <linearGradient id="profileActiveGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#0891b2;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <circle cx="12" cy="8" r="4" fill="url(#profileActiveGradient)"/>
                    <path fill="url(#profileActiveGradient)" d="M6 21v-2a4 4 0 014-4h4a4 4 0 014 4v2z"/>
                    <circle cx="12" cy="8" r="2.5" fill="#ffffff" opacity="0.9"/>
                    <circle cx="12" cy="8" r="1.5" fill="url(#profileActiveGradient)"/>
                    <circle cx="12" cy="17" r="1.5" fill="#ffffff" opacity="0.8"/>
                </svg>`
            }
        ];

        function createIconItem(icon) {
            const item = document.createElement('div');
            item.className = 'icon-item';
            
            item.innerHTML = `
                <div class="icon-preview">${icon.svg}</div>
                <div class="icon-name">${icon.displayName}</div>
                <button class="download-btn" onclick="downloadIcon('${icon.name}', \`${icon.svg.replace(/`/g, '\\`')}\`)">
                    下载PNG
                </button>
            `;
            
            return item;
        }

        function downloadIcon(name, svg) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 48;
            canvas.height = 48;
            
            const img = new Image();
            const svgBlob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'});
            const url = URL.createObjectURL(svgBlob);
            
            img.onload = function() {
                ctx.clearRect(0, 0, 48, 48);
                ctx.drawImage(img, 0, 0, 48, 48);
                
                canvas.toBlob(function(blob) {
                    const a = document.createElement('a');
                    a.href = URL.createObjectURL(blob);
                    a.download = `${name}.png`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }, 'image/png');
            };
            
            img.src = url;
        }

        // 初始化图标网格
        const iconGrid = document.getElementById('iconGrid');
        icons.forEach(icon => {
            iconGrid.appendChild(createIconItem(icon));
        });
    </script>
</body>
</html> 